var Group = {

    selected_row_id: null,
    objGrid: null,

    init: function () {
        var self = this;

        self.objGrid = $('#flex').flexigrid({
            url: $('#table-url').val(),
            reload_after_add: false,
            dataType: 'json',
            colModel: [
                {display: 'ID', name: 'id', width: 20, sortable: false, align: 'left', hide: true},
                {display: 'Group Name', name: 'name', width: 300, sortable: true, align: 'left', hide: false, editable: {form: 'text', validate: 'empty', defval: ''}},
                {display: 'Modules Count', name: 'count', width: 100, sortable: false, align: 'left', hide: false}
            ],
            formFields: [
                {type: 'buttom', name: 'New', bclass: 'add', onpress: self.handleGridEvent},
                {separator: true},
                {type: 'buttom', name: 'Save', bclass: 'save', onpress: self.handleGridEvent},
                {separator: true},
                {type: 'buttom', name: 'Edit', bclass: 'edit', onpress: self.handleGridEvent},
                {separator: true},
                {type: 'buttom', name: 'Cancel', bclass: 'cancel', onpress: self.handleGridEvent},
                {separator: true},
                {type: 'buttom', name: 'Delete', bclass: 'delete', onpress: self.handleGridEvent},
                {separator: true}
            ],
            searchitems: [
                {display: 'Branches Name', name: 'name', isdefault: true}
            ],
            checkboxSelection: true,
            editablegrid: {
                use: true,
                url: $('#table-editable-url').val()
            },
            columnControl: false,
            sortname: "id",
            sortorder: "desc",
            usepager: true,
            useRp: true,
            rp: 15,
            showTableToggleBtn: false,
            height: 300,
            subgrid: {
                use: true,
                url: $('#table-sub-load-url').val(),
                colModel: [
                    {display: 'Module', name: 'module_id', width: 200, align: 'center', editable: {form: 'select', validate: '', defval: '', options: modules}}
                ],
                editablegrid: {
                    use: true,
                    url: $('#table-sub-editable-url').val(),
                    callback: function (server_response) {
                        if (server_response.code == 0) {
                            jLib.message('Data Status', server_response.msg, 'success');
                        }
                        else {
                            jLib.message('Data Status', server_response.msg, 'error');
                        }
                    }
                },
                formFields: [
                    {type: 'buttom', name: 'New', bclass: 'new', onpress: self.handleSubGridEvent},
                    {separator: true},
                    {type: 'buttom', name: 'Edit', bclass: 'edit', onpress: self.handleSubGridEvent},
                    {separator: true},
                    {type: 'buttom', name: 'Save', bclass: 'save', onpress: self.handleSubGridEvent},
                    {separator: true},
                    {type: 'buttom', name: 'Cancel', bclass: 'print', onpress: self.handleSubGridEvent},
                    {separator: true},
                    {type: 'buttom', name: 'Delete', bclass: 'delete', onpress: self.handleSubGridEvent}
                ],
                callback: function (response) {

                }
            }
        });
    },

    handleGridEvent: function (com, grid, json) {
        if (com == 'New') {
            Group.objGrid.flexBeginAdd();
        }
        else if (com == 'Edit') {
            if (FlexObject.rowSelectedCheck(Group.objGrid, grid)) {
                var row = FlexObject.getSelectedRows(grid);
                Group.objGrid.flexBeginEdit(row[0]);
            }
        }
        else if (com == 'Save') {
            Group.objGrid.flexSaveChanges();
        }
        else if (com == 'Cancel') {
            Group.objGrid.flexCancel();
        }
        else if (com == 'Delete') {
            if (FlexObject.rowSelectedCheck(Group.objGrid, grid)) {
                var url = $('#table_delete_url').val();
                Group.delete_(Group.objGrid, grid, url, 'main');
            }
        }
    },

    delete_: function (griObject, grid_dom, url, type) {
        var self = this;
        if (type == 'main') {
            Jlib.do_delete(griObject, url, grid_dom);
        }
        else {
            Jlib.do_sub_delete(griObject, url, grid_dom);
        }
    },


    handleSubGridEvent: function (com, inner_table) {
        if (com == 'New') {
            Group.objGrid.flexBeginSubAdd(inner_table);
        }
        else if (com == 'Edit') {
            var rows = FlexObject.getSelectedSubRows(inner_table);
            //we only need to edit the first one we can't do multiple editing
            if (rows.length > 0) {
                Group.objGrid.flexBeginSubEdit(rows[0]);
            }
        }
        else if (com == 'Save') {
            Group.objGrid.flexSubSaveChanges();
        }
        else if (com == 'Cancel') {
            Group.objGrid.flexSubCancel();
        }
        else if (com == 'Delete') {
            if (FlexObject.rowSubSelectedCheck(Group.objGrid, inner_table)) {
                var url = $('#table-sub_delete_url').val();
                Group.delete_(Group.objGrid, inner_table, url, 'sub');
            }
        }
    }
};

/* when the page is loaded */
$(document).ready(function () {
    Group.init();
});